<template>
	<view>
		<view class="guide_headler">
			<image src="https://aliyunoss.hntgov.net/sd/guide_jd.png"></image>
			<view style="display: flex;flex-direction: column;margin-left: 25rpx;color: #fff;gap: 8rpx;margin-top: 2rpx;">
				<text style="font-size: 32rpx;">{{isGiveCard?'购买成功！制卡成功':'购买成功！制卡中'}}</text>
				<text style="color: #D3D3D3;font-size: 24rpx;">{{isGiveCard?'卡号发送成功，您可直接进行旅游卡绑定':'支付后10分钟左右制卡成功'}}</text>
			</view>
		</view>
		
		<view class="guide_item" style="margin-top: -50rpx;">
			<view class="guide_item_h">
				<text></text>
				<text>旅游卡信息</text>
			<!-- 	<text @click="toOrderDetail()">订单详情 >></text> -->
			</view>
			
			<view class="guide_item_text">您已成功购买<text style="color: #FF000A;">{{orderDetail.modelName}}</text></view>
			
			 <view v-if="!isGiveCard" class="guide_item_text">系统会在<text style="color: #FF000A;">10分钟</text>左右，卡号将以短信形式发至</view>
			
			<view  v-if="!isGiveCard" class="guide_item_text">您的手机：<text style="color: #FF000A;">{{orderDetail.mobile||''}}</text></view>
			
			<view v-if="isGiveCard">
			<view class="guide_item_text" style="width:630rpx;position: relative;" v-for="(item,index) in orderDetail.cardNoList" :key="index">旅游卡卡号<text style="color: #FF000A;">{{item}}</text> <text style="position: absolute;right: 0rpx;color: #5F94FF;" @click="toBind(item,orderDetail.typeId,orderDetail.modelName,orderDetail.channel)">去绑定</text></view>
			</view>
			<view class="guide_item_btn" v-if="!isGiveCard" @click="getQueryZfbzdOrderMethod(2)">查询卡号</view>
		</view>
		
		<view class="guide_item" style="margin-top: 40rpx;">
			<view class="guide_item_h">
				<text></text>
				<text>旅游卡使用</text>
			</view>
			
			<view class="guide_item_text" style="line-height: 40rpx;">若旅游卡已绑定，可去小程序【质惠游-卡包】直接使用，或点击下方使用按键</view>
			<view style="margin-top: 30rpx;">
			<u-button :custom-style="customStyle" v-if="isGiveCard" shape="circle" @click="toTicket()" type="primary">去使用</u-button>
			</view>
		</view>
		
		<view class="guide_item" style="margin-top: 40rpx;">
			<view class="guide_item_h">
				<text></text>
				<text>客服信息</text>
			</view>
			
			<view class="guide_item_text">若有更多使用问题，可直接拨打客服电话咨询</view>
			
			<view class="guide_item_text" style="margin-top: 40rpx;" @click="makePhone()">客服电话：<text style="color: #5F94FF;">0731-88912301</text></view>
			
		</view>
<!-- 		//制卡中,请稍后！ -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				orderNo:'',
				orderDetail:'',
				isGiveCard:false,
				customStyle: {
					backgroundColor: '#5F94FF'
				},
			}
		},
		onLoad(e) {
			this.orderNo=e.orderNo
			this.getQueryZfbzdOrderMethod(1)
		},
		methods:{
			toTicket(){
				uni.switchTab({
					url:'ticket'
				})
			},
			getQueryZfbzdOrderMethod(e){
				this.$u.api.getQueryZfbzdOrder({orderNo:this.orderNo}).then(res => {
					this.orderDetail=res.data
					if(res.data.cardNoList.length==0||(!res.data.cardNoList)){
						if(e==2){
							uni.showToast({
								icon:'none',
								title:'制卡中,请稍后！'
							})
						}
						this.isGiveCard=false
					}else{
						this.isGiveCard=true
					}
				})
			},
			makePhone(e){
				uni.makePhoneCall({
					phoneNumber:'0731-88912301'
				})
			},
			toBind(cardNo,typeId,modelName,channel){
				uni.navigateTo({
					url:`/pages/card/bind?cardNo=${cardNo}&typeId=${typeId}&modelName=${modelName}&channel=${channel}`
				})
			},
			toOrderDetail(){
				uni.navigateTo({
					url:'/pages/order/orderdetail?id='+this.orderNo
				})
			}
		}
	}
</script>
<style>
	page{
		background: #f8f8f8;
	}
	.guide_headler{
		width: 750rpx;
		background-color: #488CFE;
		height: 300rpx;
		border-radius: 0% 0% 50% 50% / 44% 44% 7% 7%;
		display: flex;
		align-items: center;
		padding-left: 46rpx;
	}
</style>
<style lang="less" scoped>
	.guide_item{
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		padding: 0rpx 30rpx 48rpx 30rpx;
		border-radius: 8rpx;
		.guide_item_h{
			width: 630rpx;
			height: 82rpx;
			border-bottom: 2rpx solid #E7E6E6;
			display: flex;
			align-items: center;
			position: relative;
			text:nth-child(1){
				width: 5rpx;
				height: 36rpx;

				background: linear-gradient(180deg, rgba(234, 51, 35, 0) 0%, #EA3323 100%);
				display: inline-block;
			}
			text:nth-child(2){
				font-size: 28rpx;
				color: #3D3D3D;
				margin-left: 20rpx;
			}
			text:nth-child(3){
				font-size: 24rpx;
				color: #5F94FF;
				position: absolute;
				right: 0rpx;
			}
		}
		
		.guide_item_text{
			margin-top: 40rpx;color: #3D3D3D;font-size: 24rpx;
		}
		
		.guide_item_btn{
			width: 160rpx;
			height: 64rpx;
			color: #fff;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			margin-top: 20rpx;
			
			background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
		}
	}
	 .guide_headler{
		 image{
			 width: 82rpx;
			 height: 65rpx;
		 }
	 }
</style>